import { useState, useTransition } from "react";
import classname from "classname";
import Home from "./components/home";
import List from "./components/list";
import About from "./components/about";
import Loading from "./components/loading";

const Chapter17 = (props) => {
    const { title } = props;
    const [page, setPage] = useState("home");
    const [isPending, startTransition] = useTransition();
    const switchPage = (page) => {
        startTransition(() => {
            setPage(page);
        });
    };
    const renderPage = () => {
        if (isPending) {
            return <Loading />;
        }
        switch (page) {
            case "home":
                return <Home />;
            case "about":
                return <About />;
            case "list":
                return <List />;
            default:
                return <Home />;
        }
    };
    return (
        <div className='wrapper wrapper6'>
            <div className='page-header'>
                <h3>{title}</h3>
            </div>
            <div className='page-content'>
                <div className='btn-group'>
                    <div
                        className={classname({
                            btn: true,
                            "btn-default": page !== "home",
                            "btn-primary": page === "home",
                        })}
                        onClick={() => switchPage("home")}
                    >
                        首页
                    </div>
                    <div
                        className={classname({
                            btn: true,
                            "btn-default": page !== "list",
                            "btn-primary": page === "list",
                        })}
                        onClick={() => switchPage("list")}
                    >
                        列表
                    </div>
                    <div
                        className={classname({
                            btn: true,
                            "btn-default": page !== "about",
                            "btn-primary": page === "about",
                        })}
                        onClick={() => switchPage("about")}
                    >
                        关于
                    </div>
                </div>
                <div
                    style={{
                        paddingTop: 20,
                        height: "80px",
                        overflow: "hidden",
                    }}
                >
                    {renderPage()}
                </div>
            </div>
        </div>
    );
};

export default Chapter17;
